<template>
  <view class="td-box">
    <view class="field-contents">
      <!-- 田地项目 - 重复12个 -->
      <view class="field-item flex-bottom" v-for="(field, index) in handleFieldBgFieldsList" :key="index"
        @click="handleFieldClick(index)">
        <image class="td-img" :src="field.img" mode="aspectFill"></image>

        <image v-if="field.current_status === 'F'" class="seed-img" style="height: 10px;" src="/static/img/td/seed.png"
          mode="aspectFit"></image>

        <image v-if="field.current_status === 'H'" class="plant-img" style="height: 58px;"
          :src="projectConfig.imgPrefix + field.harvestImage" mode="aspectFit"></image>

        <image v-if="field.current_status === 'G'" class="plant-img" style="height: 58px;"
          src="/static/img/withered.png" mode="aspectFit"></image>

        <!-- 种子动画 -->
        <image class="insect-png-animation" :class="{ hidden: !field.showSeedAnimation }" src="/static/img/td/seed.png"
          mode="aspectFit"></image>

        <!-- 虫子 -->
        <!-- <image class="insect" :class="{ hidden:  ['K', 'G'].includes(field.current_status) || (field.current_status !== 'F' && !field.is_insect) }"
          src="/static/img/chong.png" mode="aspectFit">
        </image> -->

        <!-- 操作动画 -->
        <image class="insect-wu-animation" :class="{ hidden: !field.showWeedAnimation }" src="/static/img/cc.gif"
          mode="aspectFit"></image>
        <image class="insect-wu-animation" :class="{ hidden: !field.showPesticideAnimation }" src="/static/img/sc.gif"
          mode="aspectFit"></image>
        <image class="insect-js-animation" :class="{ hidden: !field.showWaterAnimation }" src="/static/img/js.gif"
          mode="aspectFit"></image>
        <image class="insect-sf-animation" :class="{ hidden: !field.showFertilizerAnimation }" src="/static/img/sf.gif"
          mode="aspectFit"></image>
        <image class="insect-jscc-animation" :class="{ hidden: !field.showTurnTheSoilAnimation }"
          src="/static/img/cac.gif" mode="aspectFit"></image>
        <image class="insect-pngsg-animation" :class="{ hidden: !field.showHarvestAnimation }" src="/static/img/zs.png"
          mode="aspectFit"></image>

        <!-- 点击土地后，操作按钮显示 -->
        <view :class="{ hidden: friendHomeMode || !field.td_selected || !(['K', 'H', 'G'].includes(field.current_status)) }"
          class="status-one">
          <image v-if="field.current_status === 'K'" @click="handleOpenSelectSeedPopup" class="icon"
            src="/static/img/seeds/use-seed.png" mode="aspectFit"></image>
          <view v-if="field.current_status === 'H'" class="quan flex-center quan-jian" @click="handleHarvest(field)">
            <image class="icon" src="/static/img/use2.png" mode="aspectFit"></image>
          </view>
          <view v-if="field.current_status === 'G'" class="quan flex-center quan-jian" @click="handleToTheSoil(field)">
            <image class="icon" src="/static/img/use3.png" mode="aspectFit"></image>
          </view>
        </view>

        <!-- 点击土地后，道具显示 -->
        <view class="select-in-wrap" :class="{ hidden: !field.td_selected || !(['F'].includes(field.current_status)) }">
          <view class="flex-center zw-list">
            <!-- <view v-if="field.is_insect" class="quan flex-center quan-jian" @click.stop="handleInsect(field)">
              <image class="icon" src="/static/img/prop3.png" mode="aspectFit"></image>
            </view>
            <view v-if="field.is_drought" class="quan flex-center quan-jian" @click.stop="handleDrought(field)">
              <image class="icon" src="/static/img/kettle.png" mode="aspectFit"></image>
            </view> -->
            <view v-if="field.current_status === 'F'" class="quan flex-center quan-jian"
              @click.stop="handleFertilizer(field)">
              <image class="icon" src="/static/img/Fertilizer_Lv1.png" mode="aspectFit"></image>
            </view>
          </view>
          <view v-if="field.showTimeCount" class="times-content">
            <view class="text">{{ field.timeText }}</view>
            <view class="flex-center time">
              <image class="djs-icon relative" src="/static/img/shalou.png" mode="aspectFill"></image>
              <view>{{ field.timeCount + 's' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 选择种子弹窗 -->
    <uni-popup ref="chooseSeedPopup" type="center">
      <view class="choose-seed-popup-box model-content">
        <image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeChooseSeedPopup"></image>
        <view class="title">{{ $t('farm.choose_seed', 'Choose a seed') }}</view>
        <view class="contents">
          <template v-if="seedList.length > 0">
            <view class="items" v-for="seed in seedList" :key="seed.id" :class="{ active: seed.selected }"
              @click.stop="handleSelectSeed(seed)">
              <image class="shop-img" :src="projectConfig.imgPrefix + seed.image" mode="aspectFit"></image>
              <view class="num">{{ seed.num }}</view>
              <view class="text-overflow">{{ $t(seed.language_key, seed.seed_name) }}</view>
            </view>
          </template>
          <template v-else>
            <view class="no-data">
              <image class="img" src="/static/img/backpack-nodata.png" mode="aspectFit"></image>
              <view class="no-text">{{ $t('farm.no_material_yet', 'No material yet') }}</view>
            </view>
          </template>
        </view>
        <view v-if="selectedSeed" class="sumbit-btn" @click="handleSeedDefine">{{ $t('common.define', 'Define') }}</view>
      </view>
    </uni-popup>

    <!-- 选择道具弹窗 -->
    <uni-popup ref="choosePropsPopup" type="center">
      <view class="choose-seed-popup-box model-content">
        <image class="close-img" src="/static/img/close.png" mode="aspectFit" @click="closeChooseFertilizerPopup">
        </image>
        <view class="title">{{ choosePropsPopupTitle }}</view>
        <view class="contents">
          <template v-if="propsList[currentPropType].length > 0">
            <view class="items" v-for="prop in propsList[currentPropType]" :key="prop.id"
              :class="{ active: prop.selected }" @click.stop="handleSelectProp(prop)">
              <image class="shop-img" :src="projectConfig.imgPrefix + prop.image" mode="aspectFit"></image>
              <view class="num">{{ prop.num }}</view>
              <view class="text-overflow">{{ $t(prop.language_key, prop.item_name) }}</view>
            </view>
          </template>
          <template v-else>
            <view class="no-data">
              <image class="img" src="/static/img/backpack-nodata.png" mode="aspectFit"></image>
              <view class="no-text">{{ $t('farm.no_material_yet', 'No material yet') }}</view>
            </view>
          </template>
        </view>
        <view v-if="selectedProp" class="sumbit-btn" @click="handlePropsDefine">{{ $t('common.define', 'Define') }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { farmApi } from '@/request/farm.js'
import { systemApi } from '@/request/system.js'
import projectConfig from '@/config/project.json'
import dayjs from 'dayjs'
import { languageMixin } from '@/utils/language-mixin.js'
import { mapGetters } from 'vuex'

export default {
  name: "FieldBox",
  mixins: [languageMixin],
  data() {
    return {
      fields: [],
      selectedField: null,
      selectedFieldIndex: null,
      choosePropsPopupTitle: "",
      seedList: [],
      propsList: {
        pesticide: [],
        fertilizer: [],
        water: [],
      },
      currentPropType: "",
      selectedSeed: null,
      selectedProp: null,
      projectConfig,
      timer: null,
      refreshTimer: null,
      landDataTimer: null, // 30秒定时刷新土地数据
    };
  },
  mounted() {
    this.loadLandData()
    this.loadKnapsackData()
    this.startLandDataTimer()
  },
  beforeDestroy() {
    this.clearAllTimers()
  },
  computed: {
    ...mapGetters('user', ['friendHomeMode']),
    handleFieldBgFieldsList() {
      this.fields.forEach((field, index) => {
        if (['K', 'G'].includes(field.current_status)) {
          field.img = field.td_selected ? '/static/img/td/init-select.png' : '/static/img/td/init.png'
        }
        if (['F', 'H'].includes(field.current_status)) {
          if (field.td_selected) {
            // field.img = field.is_drought ? '/static/img/td/drought-select.png' : '/static/img/td/grow-select.png'
            field.img = '/static/img/td/grow-select.png'
          } else {
            // field.img = field.is_drought ? '/static/img/td/drought.png' : '/static/img/td/grow.png'
            field.img = '/static/img/td/grow.png'
          }
        }
      })
      return this.fields
    },
  },
  methods: {
    // 加载土地数据
    async loadLandData() {
      try {
        const res = await farmApi.getLandList()
        if (res && res.code === 200 && Array.isArray(res.data)) {
          // 处理API返回的土地数据
          this.fields = Array.from({ length: 12 }, (_, index) => {
            const landData = res.data.find(land => land.landNo === index + 1)
            if (landData) {
              return {
                user_land_id: landData.id,
                number: landData.landNo,
                seed_id: landData.seedId,
                current_status: landData.ttatus,
                current_status_name: landData.ttatus,
                harvestTime: landData.harvestTime,
                plantedTime: landData.plantedTime,
                seedName: landData.seedName,
                harvestImage: landData.image,
                is_drought: Number(landData.isDrought) === 1 ? true : false,
                is_insect: Number(landData.isInsect) === 1 ? true : false,
                is_grass: Number(landData.isGrass) === 1 ? true : false,
                status: landData.status,
                seed: landData.seedImage,
                td_selected: false,
                img: "/static/img/td/init.png",
                showSeed: false,
                showSeedAnimation: false,
                showTurnTheSoilAnimation: false,
                showWeedAnimation: false,
                showFertilizerAnimation: false,
                showPesticideAnimation: false,
                showHarvestAnimation: false,
                showWaterAnimation: false,
                showSelect: false,
                showUseSeed: false,
                showTimeCount: false,
                timeText: "seed",
                timeCount: 0,
              }
            } else {
              return {
                current_status: 'K', // K：未播种，F：已播种，H: 成熟 G: 荒地
                current_status_name: "seed",
                number: index + 1,
                is_drought: false,
                is_fertilizer: false,
                is_weed: false,
                is_harvest: false,
                is_insect: false,
                is_mature: false,
                td_selected: false,
                img: "/static/img/td/init.png",
                showSeed: false,
                showSeedAnimation: false,
                showTurnTheSoilAnimation: false,
                showWeedAnimation: false,
                showFertilizerAnimation: false,
                showPesticideAnimation: false,
                showHarvestAnimation: false,
                showWaterAnimation: false,
                showSelect: false,
                showUseSeed: false,
                showTimeCount: false,
                timeText: "seed",
                timeCount: 10000,
              }
            }
          })
          if (this.fields.find(field => field.current_status === 'F')) {
            this.refreshFieldStatus()
            this.refreshTimer = setInterval(() => {
              this.refreshFieldStatus()
            }, 10000)
          }
          // console.log(this.fields)
        }
      } catch (e) {
        console.error('Failed to load land data', e)
        // 初始化默认土地数据
        this.fields = Array.from({ length: 12 }, (_, index) => ({
          current_status: 'K',
          current_status_name: "seed",
          number: index + 1,
          is_drought: false,
          is_fertilizer: false,
          is_weed: false,
          is_harvest: false,
          is_insect: false,
          is_mature: false,
          td_selected: false,
          img: "/static/img/td/init.png",
          showSeed: false,
          showSeedAnimation: false,
          showTurnTheSoilAnimation: false,
          showWeedAnimation: false,
          showFertilizerAnimation: false,
          showPesticideAnimation: false,
          showHarvestAnimation: false,
          showWaterAnimation: false,
          showSelect: false,
          showUseSeed: false,
          showTimeCount: false,
          timeText: "seed",
          timeCount: 10000,
        }))
      }
    },

    // 加载背包数据
    async loadKnapsackData() {
      try {
        const res = await systemApi.getKnapsack({ type: 0, page: 1, limit: 100 })
        if (res && res.code === 200 && res.data) {
          // 处理种子数据
          if (res.data.seeds && Array.isArray(res.data.seeds)) {
            this.seedList = res.data.seeds.filter(item => item.num !== 0)
          }
          this.propsList.pesticide = [];
          this.propsList.fertilizer = [];
          this.propsList.water = [];

          // 处理道具数据
          if (res.data.items && Array.isArray(res.data.items)) {
            // 根据道具类型分类
            res.data.items.forEach(item => {
              // const propData = {
              //   id: item.item_id,
              //   img: item.image || '/static/img/prop3.png',
              //   num: item.num || 0,
              //   name: item.item_name || 'Unknown Item',
              //   selected: false
              // }

              // 根据道具名称分类到不同类型
              if (item.item_name && item.item_name.includes('杀虫')) {
                this.propsList.pesticide.push(item)
              } else if (item.item_name && item.item_name.includes('肥料')) {
                this.propsList.fertilizer.push(item)
              } else if (item.item_name && item.item_name.includes('水')) {
                this.propsList.water.push(item)
              }
            })
          }
        }
      } catch (e) {
        console.error('Failed to load backpack data', e)
      }
    },

    async handleOpenSelectSeedPopup() {
      this.fields.forEach(field => {
        field.td_selected = false;
      })
      // 重新加载种子数据
      await this.loadKnapsackData()
      if(this.seedList.length === 0) {
        uni.showToast({
          title: this.$t('messages.no_seed', 'No seed'),
          icon: 'none'
        })
        return;
      }
      this.$refs.chooseSeedPopup.open();
    },
    refreshFieldStatus() {
      this.fields.forEach(field => {
        if (field.current_status === 'F') {
          let timeCount = dayjs(field.harvestTime).diff(dayjs(), 'seconds')
          if (timeCount > 0) {
            field.timeCount = timeCount
            field.timeText = "seed"
            field.showTimeCount = true
          } else {
            field.showTimeCount = false
            field.timeCount = 0
            field.current_status = 'H'
            field.current_status_name = 'H'
          }
          // console.log('field.showTimeCount', field.showTimeCount, field.current_status, field.timeCount)
        }
      })
    },

    handleFieldClick(index) {
      console.log('handleFieldClick', this.fields[index])
      clearInterval(this.timer);
      this.timer = null;
      if (this.fields[index].td_selected) {
        this.fields[index].td_selected = false;
        this.selectedField = null;
        this.selectedFieldIndex = null;
        return;
      }
      this.fields.forEach((field, index) => {
        field.td_selected = false;
      })
      this.fields[index].td_selected = true;
      this.selectedField = this.fields[index];
      this.selectedFieldIndex = index;

      if (this.selectedField.current_status === 'F' && this.selectedField.td_selected) {
        this.timer = setInterval(() => {
          this.selectedField.timeCount -= 1;
          if (this.selectedField.timeCount <= 0) {
            this.selectedField.timeCount = 0;
            this.selectedField.current_status = 'K';
            this.selectedField.timeText = "seed";
            this.selectedField.showTimeCount = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      if (this.selectedField.current_status === 'F' && this.selectedField.td_selected) {
        this.selectedField.timeText = "seed";
      }
    },

    updateField(index, data) {
      if (this.fields[index]) {
        this.fields[index] = { ...this.fields[index], ...data };
      }
    },

    closeChooseSeedPopup() {
      this.seedList.forEach(item => {
        item.selected = false;
      });
      this.selectedSeed = null;
      this.$refs.chooseSeedPopup.close();
    },

    async handleSeedDefine() {
      if (!this.selectedSeed || !this.selectedField) {
        uni.showToast({
          title: this.$t('messages.please_select_seed', 'Please select a seed'),
          icon: 'none'
        })
        return
      }

      try {
        // uni.$emit('show-loading')
        const res = await farmApi.seeding({
          landId: this.selectedField.user_land_id,
          seedId: this.selectedSeed.seed_id
        })

        if (res && res.code === 200) {
          this.$refs.chooseSeedPopup.close();
          this.fields.forEach(field => {
            field.showSeed = false;
            field.showSeedAnimation = false;
          });
          this.selectedField.showSeedAnimation = true;
          this.selectedField.showSeed = true;
          this.selectedField.current_status = 'F';
          this.selectedField.td_selected = false;

          setTimeout(() => {
            this.selectedField.showSeedAnimation = false;
          }, 1000);

          // 重新加载土地数据
          this.loadLandData()

        }
      } catch (e) {
        console.error('Failed to seed', e)
      } finally {
        this.selectedSeed = null;
        // uni.$emit('hide-loading')
      }
    },

    handleSelectSeed(seed) {
      if(this.selectedSeed && this.selectedSeed.seed_id === seed.seed_id) {
        seed.selected = false;
        this.selectedSeed = null;
        return;
      }
      this.seedList.forEach(item => {
        item.selected = false;
      });
      seed.selected = true;
      this.selectedSeed = seed;
    },

    async handleFertilizer(field) {
      this.choosePropsPopupTitle = this.$t('farm.choose_fertilizer', 'Choose a fertilizer');
      this.currentPropType = "fertilizer";
      await this.loadKnapsackData()
      if(this.propsList.fertilizer.length === 0) {
        uni.showToast({
          title: this.$t('messages.no_fertilizer', 'No fertilizer'),
          icon: 'none'
        })
        return;
      }
      this.$refs.choosePropsPopup.open();
    },

    handleSelectProp(prop) {
      if(this.selectedProp && this.selectedProp.item_id === prop.item_id) {
        prop.selected = false;
        this.selectedProp = null;
        return;
      }
      this.propsList[this.currentPropType].forEach(item => {
        item.selected = false;
      });
      prop.selected = true;
      this.selectedProp = prop;
      console.log('handleSelectProp', this.selectedProp)
    },

    async handlePropsDefine() {
      console.log('handlePropsDefine', this.selectedProp, this.selectedField)
      if (!this.selectedProp || !this.selectedField) {
        uni.showToast({
          title: this.$t('messages.please_select_prop', 'Please select a prop'),
          icon: 'none'
        })
        return
      }

      try {
        // uni.$emit('show-loading')

        let operationType = 0 // 默认浇水
        if (this.currentPropType === 'fertilizer') {
          operationType = 1 // 施肥
        } else if (this.currentPropType === 'pesticide') {
          operationType = 3 // 杀虫
        } else if (this.currentPropType === 'water') {
          operationType = 0 // 浇水
        }

        const res = await farmApi.landOperate({
          landId: this.selectedField.user_land_id,
          type: operationType,
          whId: this.selectedProp.id, // 背包道具ID
          itemId: this.selectedProp.item_id // 道具ID
        })

        if (res && res.code === 200) {
          this.$refs.choosePropsPopup.close();

          // 播放相应动画
          if (this.currentPropType === "fertilizer") {
            this.selectedField.showFertilizerAnimation = true;
            setTimeout(() => {
              this.selectedField.showFertilizerAnimation = false;
            }, 1000);
          } else if (this.currentPropType === "pesticide") {
            this.selectedField.showPesticideAnimation = true;
            setTimeout(() => {
              this.selectedField.showPesticideAnimation = false;
            }, 1000);
          } else if (this.currentPropType === "water") {
            this.selectedField.showWaterAnimation = true;
            setTimeout(() => {
              this.selectedField.showWaterAnimation = false;
            }, 1000);
          }

          this.selectedField.td_selected = false;

          // 重新加载土地数据
          this.loadLandData()

        }
      } catch (e) {
        console.error('Failed to land operation', e)
      } finally {
        this.selectedProp = null;
        // uni.$emit('hide-loading')
      }
    },

    closeChooseFertilizerPopup() {
      this.propsList[this.currentPropType].forEach(item => {
        item.selected = false;
      });
      this.selectedProp = null;
      this.$refs.choosePropsPopup.close();
    },

    handleInsect(field) {
      this.choosePropsPopupTitle = this.$t('farm.choose_pesticide', 'Choose a pesticide');
      this.currentPropType = "pesticide";
      this.$refs.choosePropsPopup.open();
    },

    handleDrought(field) {
      this.choosePropsPopupTitle = this.$t('farm.choose_water', 'Choose a water');
      this.currentPropType = "water";
      this.$refs.choosePropsPopup.open();
    },

    async handleHarvest(field) {
      try {
        // uni.$emit('show-loading')
        const res = await farmApi.harvest({
          landId: field.user_land_id
        })

        if (res && res.code === 200) {
          this.selectedField = field;
          this.selectedField.td_selected = false;
          this.selectedField.showHarvestAnimation = true;

          setTimeout(() => {
            this.selectedField.current_status = 'H';
            this.selectedField.showHarvestAnimation = false;
          }, 900);

          // 重新加载土地数据
          this.loadLandData()

        }
      } catch (e) {
        console.error('Failed to harvest', e)
      } finally {
        // uni.$emit('hide-loading')
      }
    },

    async handleToTheSoil(field) {
      try {
        // uni.$emit('show-loading')

        const res = await farmApi.landOperate({
          landId: field.user_land_id,
          type: 3
        })

        if (res && res.code === 200) {
          this.selectedField = field;
          this.selectedField.td_selected = false;
          this.selectedField.showTurnTheSoilAnimation = true;
          setTimeout(() => {
            this.selectedField.current_status = 'K';
            this.selectedField.showTurnTheSoilAnimation = false;
          }, 1000);

          // 重新加载土地数据
          setTimeout(() => {
            this.loadLandData()
          }, 1000);
        }
      } catch (e) {

      } finally {
        // uni.$emit('hide-loading')
      }
    },

    // 启动30秒定时刷新土地数据
    startLandDataTimer() {
      this.landDataTimer = setInterval(() => {
        this.loadLandData()
      }, 30000) // 30秒 = 30000毫秒
    },

    // 清理所有定时器
    clearAllTimers() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
        this.refreshTimer = null
      }
      if (this.landDataTimer) {
        clearInterval(this.landDataTimer)
        this.landDataTimer = null
      }
    },
  },
};
</script>

<style scoped lang="scss">
.td-box {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  padding-top: 338px;
  height: 460px;

  .field-contents {
    width: 100%;
    height: 78px;
    position: relative;

    .field-item {
      width: 93px;
      height: 93px;
      background-size: 100% 100%;
      margin-bottom: 10px;
      bottom: 0;
      position: absolute;
      padding-bottom: 45px;
      padding-left: 35px;

      .status-one {
        position: absolute;
        width: 29px;
        height: 33px;
        background: url(/static/img/ty.png) no-repeat;
        background-size: 100%;
        top: 5px;
        z-index: 10;
        text-align: center;
        padding-top: 5px;

        .icon {
          position: relative;
          height: 18px;
          width: 18px;
        }
      }

      .seed-img {
        max-height: 93px;
        position: absolute;
        z-index: 10;
        width: 15px;
        text-align: center;
        margin-left: 5px;
      }

      .plant-img {
        width: 46px;
        max-height: 93px;
        margin-left: -10px;
        text-align: center;
        position: absolute;
        z-index: 10;
        margin-bottom: -7px;
      }

      .insect {
        position: absolute;
        width: 12px;
        height: 12px;
        top: 26px;
        z-index: 10;
      }

      .td-img {
        width: 93px;
        height: 93px;
        position: absolute;
        left: 0;
        top: 0;
      }

      .insect-png-animation {
        position: absolute;
        width: 52px;
        height: 52px;
        top: 15px;
        left: 38px;
        z-index: 205;
        animation: move-insect 1s linear infinite;
      }

      .insect-wu-animation {
        position: absolute;
        width: 124px;
        height: 124px;
        top: -26px;
        left: 10px;
        z-index: 2055;
      }

      .insect-js-animation {
        position: absolute;
        width: 124px;
        height: 124px;
        top: -52px;
        right: -41px;
        z-index: 205;
      }

      .insect-sf-animation {
        position: absolute;
        width: 124px;
        height: 124px;
        top: -36px;
        right: -10px;
        z-index: 205;
      }

      .insect-jscc-animation {
        position: absolute;
        width: 104px;
        height: 104px;
        top: -31px;
        right: 0px;
        z-index: 205;
      }

      .insect-pngsg-animation {
        position: absolute;
        width: 83px;
        height: 83px;
        top: -10px;
        left: 36px;
        z-index: 205;
        animation: moveNext-insect 1s linear infinite;
      }

      .select-in-wrap {
        position: absolute;
        width: 131px;
        height: 73px;
        z-index: 10;
        left: -17px;
        top: 0;

        .zw-list {
          width: 100%;
          margin-bottom: 2px;

          .quan {
            width: 30px;
            height: 29px;
            background: #edf7fa;
            border: 1px solid #3a9bff;
            box-shadow: 0 6px 2px 0 rgba(0, 0, 0, .29);
            border-radius: 50%;

            .icon {
              position: relative;
              height: 22px;
              width: 18px;
            }
          }

          .quan-jian {
            margin-top: -20px;
          }
        }

        .times-content {
          min-width: 42px;
          background: #edf7fa;
          border: 1px solid #3a9bff;
          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.29);
          border-radius: 4px;
          padding: 1px 2px;
          box-sizing: border-box;
          display: inline-block;
          margin: 0 auto;

          .text {
            color: #3e3e3e;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
          }

          .time {
            color: #3a9bff;
            font-size: 7px;
            font-weight: 700;

            .djs-icon {
              width: 6px;
              height: 8px;
            }
          }
        }
      }

      // 田地位置
      &:nth-child(1) {
        top: -78px;
        right: 110px;
      }

      &:nth-child(2) {
        top: -46px;
        right: 164px;
      }

      &:nth-child(3) {
        top: -17px;
        right: 221px;

        .td-img {
          z-index: 10;
        }
      }

      &:nth-child(4) {
        top: 13px;
        right: 279px;
      }

      &:nth-child(5) {
        top: -46px;
        right: 52px;
      }

      &:nth-child(6) {
        top: -16px;
        right: 109px;
      }

      &:nth-child(7) {
        top: 12px;
        right: 166px;
      }

      &:nth-child(8) {
        top: 44px;
        right: 223px;
      }

      &:nth-child(9) {
        top: -14px;
        right: -6px;
      }

      &:nth-child(10) {
        top: 14px;
        right: 54px;
      }

      &:nth-child(11) {
        top: 44px;
        right: 113px;
      }

      &:nth-child(12) {
        top: 75px;
        right: 170px;
      }
    }
  }
}

@keyframes move-insect {
  0% {
    bottom: 0px;
  }

  33.3% {
    bottom: 3px;
  }

  66.6% {
    bottom: 8px;
    width: 15px;
  }

  100% {
    bottom: 3px;
    width: 10px;
    overflow: hidden;
    opacity: 0;
  }
}

@keyframes moveNext-insect {
  0% {
    bottom: 0px;
  }

  33.3% {
    bottom: 3px;
  }

  66.6% {
    bottom: 8px;
    width: 15px;
  }

  100% {
    bottom: 3px;
    width: 10px;
    overflow: hidden;
    opacity: 0;
  }
}

.choose-seed-popup-box {
  position: relative;
  background: url(/static/img/bg1.png) no-repeat;
  background-size: 100%;
  margin-top: -115px;
  width: 270px;

  .close-img {
    position: absolute !important;
    width: 37px;
    height: 37px;
    right: -7px;
    top: 12px;
  }

  .title {
    color: #fef9e2;
    font-weight: 700;
    font-size: 17px;
    text-align: center;
  }

  .contents {
    height: 370px;
    width: calc(100%);
    overflow: auto;
    padding-top: 12px;

    .items {
      display: inline-block;
      float: left;
      width: 72px;
      height: 72px;
      border: 2px solid rgba(129, 192, 118, 0.5);
      border-radius: 6px;
      margin-right: 3px;
      margin-bottom: 7px;
      padding: 4px;
      box-sizing: border-box;
      color: #885625;
      font-size: 10px;
      text-align: center;
      line-height: 12px;
      position: relative;
      font-weight: 700;

      &.active {
        border: 2px solid #34b11e;

        &::before {
          content: "";
          position: absolute;
          width: 18px;
          height: 18px;
          top: -7px;
          right: -7px;
          background: url(/static/img/close.png) no-repeat;
          background-size: 100%;
        }
      }

      .shop-img {
        width: 33px;
        height: 43px;
        text-align: center;
        margin-bottom: 5px;
      }

      .num {
        position: absolute;
        height: 13px;
        line-height: 13px;
        background: rgba(61, 35, 9, 0.5);
        border-radius: 6px;
        padding: 0 6px;
        color: #fef9e3;
        font-size: 12px;
        right: 8px;
        bottom: 20px;
        font-weight: 700;
      }
    }

    .no-data {
      width: 100%;
      text-align: center;
      box-sizing: border-box;
      position: relative;
      z-index: 10;
      margin-top: 44px;

      .img {
        width: 78px;
        height: 70px;
        text-align: center;
      }

      .no-text {
        color: #a27b6e;
        font-size: 15px;
        font-weight: 700;
        margin-top: 12px;
      }
    }
  }

  .sumbit-btn {
    width: 130px;
    height: 40px;
    line-height: 33px;
    text-align: center;
    margin: 0 auto;
    margin-top: -40px;
    background: url(/static/img/out-login.png) no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }
}
</style>
